<div class="w-100 animated animated-delay-300" *ngIf="tableData" [ngClass]="animation">
  <div class="row mb-3">
    <div class="col-12">
      <div class="table-responsive">
        <table class="table table-hover table-striped table-sm">
          <thead *ngIf="table?.options?.showHeaders">
          <tr>
            <th *ngFor="let header of table?.options?.headers">
              <ng-container *ngIf="header.show !== false">
                <div class="sort-group h-100 text-bold-no-break" *ngIf="header?.sort" (click)="sort(header.propName)">
                  <span>{{ header.displayName }}</span>
                  <span class="fa fa-fw fa-sort font-75"
                        *ngIf="onSort !== header.propName && onSort !== '-' + header.propName"></span>
                  <span *ngIf="onSort === header.propName" class="fa fa-fw fa-caret-up font-75"></span>
                  <span *ngIf="onSort === '-' + header.propName" class="fa fa-fw fa-caret-down font-75"></span>
                </div>
                <div *ngIf="!header?.sort">
                  <span class="text-bold-no-break">{{ header.displayName }}</span>
                </div>
              </ng-container>
            </th>
            <th *ngIf="table?.options.buttons && isShowControl" class="text-center">操作</th>
          </tr>
          </thead>
          <tbody>
          <ng-container *ngIf="tableData?.page?.formattedResults?.length > 0">
            <tr *ngFor="let data of tableData?.page?.formattedResults; let rowIndex = index;"
                (click)="rowClicked($event, rowIndex)">
              <td *ngFor="let header of table?.options.headers">
                <ng-container *ngIf="header.show !== false && !header.dynamicComponent?.component && header.propName !== 'userImage'">
                  <span class="text-bold-no-break">{{ getProperty(data, header.propName) }}</span>
                </ng-container>
                <ng-container *ngIf="header.show !== false && !header.dynamicComponent?.component && header.propName === 'userImage'">
                  <img style="height: 40px;width: 40px" [src]="getProperty(data, header.propName)" onerror="this.src='../../../../assets/cat.png'">
                </ng-container>
                <ng-tools-dynamic-component *ngIf="header.show !== false && header.dynamicComponent?.component"
                                            [component]="header.dynamicComponent.component"
                                            [context]="[data, rowIndex]"
                                            [events]="header.dynamicComponent.events"
                                            [data]="getProperty(data, header.propName)"></ng-tools-dynamic-component>
              </td>
              <td *ngIf="table?.options?.buttons  && isShowControl" class="text-center">
                <div class="operate-menu-wrap">
                  <ng-container
                    *ngFor="let btn of table?.options?.buttons; let btnIndex=index;">
              <span *ngIf="btn.isShow !== false" class="{{ btn.btnClass }} font-75 ml-1 mr-1 text-center"
                    (click)="btnClicked($event, btnIndex, rowIndex)">
                <span *ngIf="btn?.text">{{ btn.text }}</span>
                <span *ngIf="btn.iconClass" class="{{ btn.iconClass }}"></span>
              </span></ng-container>
<!--                  <span class="btn btn-link p-0" *ngIf="table?.options?.buttons.length > 1"-->
<!--                        (click)="moreOperate(data, index)">-->
<!--              <span class="fa fa-fw fa-caret-down"></span>-->
<!--            </span>-->
<!--                  <div class="more-operate-menus" *ngIf="data?.showMoreOperate">-->
<!--                    <ul class="list-group d-inline-block">-->
<!--                      <ng-container-->
<!--                        *ngFor="let btn of table?.options?.buttons.slice(defaultOperateNumber); let btnIndex=index;">-->
<!--                        <li class="list-group-item p-1 list-group-item-action operate-menus"-->
<!--                            *ngIf="btn?.isShow === true">-->
<!--                  <span class="{{ btn?.btnClass }} font-75"-->
<!--                        (click)="btnClicked($event, btnIndex + defaultOperateNumber, rowIndex)">-->
<!--                    <span *ngIf="btn?.text">{{ btn.text }}</span>-->
<!--                    <span *ngIf="btn?.iconClass" class="{{ btn.iconClass }}"></span>-->
<!--                  </span>-->
<!--                        </li>-->
<!--                      </ng-container>-->
<!--                    </ul>-->
<!--                  </div>-->
                </div>
              </td>
            </tr>
          </ng-container>
          <tr>
            <td *ngIf="tableData?.page?.formattedResults?.length === 0"
                [attr.colspan]="table?.options?.headers?.length + 1">
              暂时没有数据
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="row mb-3">
    <div class="col-2">
      <div class="btn-group dropright" *ngIf="table?.options?.headers.length > 40">
        <button class="btn btn-sm dropdown-toggle font-75" (click)="toggleSettingsDropdown(dropdownMenu)">
          <span class="fa fa-fw fa-gears"></span>
          显示设置
        </button>
        <div class="dropdown-menu p-2" #dropdownMenu>
          <div class="row" *ngFor="let header of table?.options?.headers">
            <label class="col-12">
              <input type="checkbox" (change)="headerSetting($event, header)" [checked]="header.show !== false">
              <span class="text-bold-no-break">
                  {{ header.displayName }}
                </span>
            </label>
          </div>
        </div>
      </div>
    </div>
<!--    <div class="col-8" *ngIf="table?.options?.showPagination && tableData?.page?.totalPage > 1">-->
<!--      <ng-tools-pagination [pagination]="tableData"></ng-tools-pagination>-->
<!--    </div>-->
  </div>
</div>
